<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .card-list{
            width: 100%;
            /* padding-left: 222px; */
            /* background-color: red; */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content:space-evenly;
        }
        .item{
            /* width: 100%; */
            height: 100%;                        
        }
        img{
            /* display: block; */
             width: 170px; 
             height: 220px;
        }
    </style>
</head>
<body>
    <div class="card-list" id="app">
        <div class="item" v-for="item in list">
            <img
                src="./default.png"
                alt=""
                :data-src=item
            />
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                list:[]
            },
            mounted() {
                for(let i=1;i<100000;i++){
                    let url="https://picsum.photos/400/600?r="+i;
                    this.list.push(url)
                }
            }

        });
    </script>
    <script>
        const ob=new IntersectionObserver((entries)=>{
        console.log(entries);
        for(const entry of entries){
            if(entry.isIntersecting){//判断数组标识属性是否交叉
                // console.log('交叉了');
                const img=entry.target;
                img.src=img.dataset.src;
                ob.unobserve(img)//取消交叉监听
            }
        }
        },{
            // root:null,//判断和那个元素进行交叉，视口默认为null
            // rootMargin:0, //元素交叉范围
            threshold:0   //0-1,0表示进入了视口就触发
        })
        const imgs=document.querySelectorAll('img[data-src]');
        imgs.forEach((img)=>{
            ob.observe(img)
        })
    </script>
</body>
</html>